<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true" bgImage="../../static/icon/custom-tabar.png">
			<block slot="content">设置</block>
		</cu-custom>
		<view>
			<view class="cu-form-group group-grey" @click="goPassword">
				<view class="title">登录密码修改</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="cu-form-group group-grey" @click="goBingPhone()">
				<view class="title">手机号换绑</view>
				<view class="flex align-center justify-end">
					<text class="text-gray">{{geTel(user.phone)}}</text>
					<text class="lg text-gray cuIcon-right" style="font-size: 18px;"></text>
				</view>

			</view>
			<view class="cu-form-group group-grey" @click="goPaySetting()">
				<view class="title">支付密码设置</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="cu-form-group group-grey" @click="goAccount">
				<view class="title">绑定提现账户</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
		</view>
		<view class="flex justify-center">
			<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round btn" @click="logOut">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';


	export default {
		computed: {
			...mapState({
				user: ({
					user
				}) => user.userInfo,
			}),
		},
		data() {
			return {

			};
		},
		methods: {
			...mapActions(['loginOut', 'jimLoginOut']),
			//隐藏手机号中间4位
			geTel(tel) {
				const reg = /^(\d{3})\d{4}(\d{4})$/;
				if (tel) {
					return tel.replace(reg, "$1****$2");
				} else {
					return ''
				}
			},
			goBingPhone() {
				uni.navigateTo({
					url: './changphone'
				})
			},
			goPaySetting() {
				uni.navigateTo({
					url: './paysetting'
				})
			},
			goAccount() {
				uni.navigateTo({
					url: './bindAccount'
				})
			},
			goPassword() {
				uni.navigateTo({
					url: './changpassword'
				})
			},
			logOut() {
				this.jimLoginOut()
				this.loginOut()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group+.cu-form-group {
		border-top: 1px solid #E6E6E6;
	}

	.group-grey {
		background-color: #F7F7F7;
	}

	.bg-btn-pick {
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}

	.color-100 {
		color: #FFFFFF;
	}

	.btn {
		width: 240px;
		margin-top: 80px;
	}
</style>
